<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2509195_ropp5u3a7.css">
    <link rel="stylesheet" type="text/css" href="../css/detail.css">
    <link rel="stylesheet" href="../libs/Swiper/swiper-bundle.min.css">
    <script src="../libs/requirejs/require.min.js" data-main="../js/detail"></script>
    <title>Document</title>
</head>

<body>
    <header>
    </header>
    <main>
        <section class="detail-recommend">
            <div class="detail-recommend-title">
                <h2>为你推荐</h2>
            </div>
            <div class="detail-recommend-slider">
                <div class="detail-recommend-slider-container">
                    <ul class="detail-bottom">
                    </ul>
                    <script type="text/html" id="recommend-template">
                        {{each recommends recom}}
                        <li class="detail-bottom-item">
                            <a href="../html/detail.html?id={{recom.id}}">
                                <div class="mod-img">
                                    <img src="{{recom.imgUrl}}" alt="">
                                </div>
                                <div class="mod-desc">
                                    <h4 class="desc-title">{{recom.gods_name}}</h4>
                                    <h6 class="desc-subtitle">{{recom.gods_info}}</h6>
                                    <p class="desc-price">
                                        <span>￥</span>
                                        <span class="price-text">{{recom.price}}</span>
                                    </p>
                                </div>
                            </a>
                        </li>
                        {{/each}}
                    </script>
                </div>
            </div>
        </section>
    </main>
    <script type="text/html" id="pro-template">
        <div class="nav">
            <div class="nav-container">
                <span class="curr-name">{{product.gods_name}}</span>
                <ul class="other-product">
                    <li><a href="">魅族 18 Pro</a></li>
                    <li><a href="">【老用户】魅族 18</a></li>
                    <li><a href="">【老用户】18 Pro</a></li>
                    <li><a href="">魅族 17</a></li>
                    <li><a href="">魅族 17 Pro</a></li>
                </ul>
                <ul class="list">
                    <li><a href="">概述</a></li>
                    <li><a href="">参数</a></li>
                    <li><a href="">换机指引</a></li>
                </ul>
            </div>
        </div>
        <section class="product-parameter clear_fix">
            <div class="left">
                <div class="left-swiper-container">
                    <div class="swiper-container">
                        <ul class="swiper swiper-wrapper">
                            {{each product.showImgUrl item}}
                            <li class="swiper-slide"><img src="{{item.url}}" alt=""></li>
                            {{/each}}
                        </ul>
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="left-action">
                    <a href="" class="vm-fav"><i class="iconfont icon-shoucang"></i>收藏</a>
                    <a href="" class="vm-compare"><i class="iconfont icon-duibi"></i>对比</a>
                    <a href="" class="vm-kefu"><i class="iconfont icon-kefu"></i>客服</a>
                </div>
            </div>
            <div class="right">
                <div class="right-header">
                    <div class="title">
                        <h1>{{product.gods_name}}</h1>
                    </div>
                    <p class="info">
                        <font color="#e03d3d">【详情页抽百元红包】【{{product.gods_desc}}】</font>
                        {{product.gods_info}}
                    </p>
                </div>
                <div class="right-sell">
                    <div class="product-price">
                        <div class="price">
                            <small>￥</small>
                            <span>3999</span>
                        </div>
                    </div>
                </div>
                <div class="right-service">
                    <div class="product-set">
                        <dl class="set-sale set-sale-version">
                            <dt>版本</dt>
                            <dd>
                                <a href="" class="selected">{{product.version}}</a>
                                <!-- <a href="">全网通公开版 8+256GB</a>
                                <a href="">全网通公开版 12+256GB</a> -->
                            </dd>
                        </dl>
                        <dl class="set-sale set-sale-color">
                            <dt>颜色</dt>
                            <dd>
                                <a href="" class="selected">{{product.color}}</a>
                                <!-- <a href="">渡海</a>
                                <a href="">等风</a> -->
                            </dd>
                        </dl>
                    </div>
                    <div class="product-number">
                        <div class="select-num">选择数量</div>
                        <div class="num-control">
                            <a href="" class="btn-sub">-</a>
                            <input type="number" value="1" data-limit="3">
                            <a href="" class="btn-add">+</a>
                        </div>
                    </div>
                    <div class="product-account">
                        <div class="buy-action">
                            <a href="" class="btn-buy">立即购买</a>
                            <a href="" class="btn-cart">加入购物车</a>
                        </div>
                        <div class="product-service">
                            <span><img src="../img/gou.png">花呗分期</span>
                            <span><img src="../img/gou.png">顺丰发货</span>
                            <span><img src="../img/gou.png">以旧换新</span>
                            <span><img src="../img/gou.png">7天无理由换货</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </script>
    <footer>
    </footer>
    <!-- <script type="text/javascript" src="../js/tools.js"></script>
    <script type="text/javascript" src="../js/detail.js"></script> -->
</body>

</html>